<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="../assets/vue.js"></script>
	<title>内置组件 -slot讲解</title>
</head>
<body>
<h1>25内置组件 -slot讲解</h1>
<hr>
<div id="app">
	<Hello>
		<span slot="bUrl">{{HelloData.bolgUrl}}</span>
		<span slot="netName">{{HelloData.netName}}</span>
		<span slot="skill">{{HelloData.skill}}</span>
	</Hello>
</div>

<template id="tep">
	<div>
		<p>Url:<slot name="bUrl"></slot></p>
		<p>enName:<slot name="netName"></slot></p>
		<p>zhName:<slot name="skill"></slot></p>
	</div>
</template>

<script type="text/javascript">

	var helloTep = {
		template:'#tep'
	};

	var app= new Vue({
		el:'#app',
		data:{
			HelloData:{
				bolgUrl:'https://cn.bing.com',
				netName:'bing',
				skill:'必应'
			},
		},
		components:{
			'Hello':helloTep
		}
	});
</script>
</body>
</html>